{% extends "_layouts/examples.html" %}
{% block title %}Navigation / Deprecated dark{% endblock %}

{% block standalone_css %}patterns_navigation{% endblock %}

{% block content %}
<header id="navigation" class="p-navigation is-dark">
  <div class="p-navigation__row">
    <div class="p-navigation__banner">
      <div class="p-navigation__tagged-logo">
        <a class="p-navigation__link" href="#">
          <div class="p-navigation__logo-tag">
            <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
          </div>
          <span class="p-navigation__logo-title">Ubuntu</span>
        </a>
      </div>
      <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
      <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
    </div>
    <nav class="p-navigation__nav" aria-label="Example main">
      <ul class="p-navigation__items">
        <li class="p-navigation__item is-selected">
          <a class="p-navigation__link" href="#">Products</a>
        </li>
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">Services</a>
        </li>
        <li class="p-navigation__item">
          <a class="p-navigation__link" href="#">Partners</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
{% endblock %}
